<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Drawing and Copying</title>
    <style>
        body {
            display: flex;  /* 开启Flex布局 */
            justify-content: center;  /* Flex主轴居中对齐 */
            align-items: center; /* Flex交叉轴居中对齐 */
            min-height: 100vh; /* 设置最小视口高度 */
            margin: 0; /* 移除默认边距 */
        }
        .canvas-container {
            margin-bottom: 10px; /* DIV间隔10像素 */
            width: 600px;
            height: 800px;
            border: 1px solid #888; /* 给canvas添加边框以便观察 */
            display: flex; /* 启用Flexbox布局 */
            justify-content: center; /* 水平居中 */
        }

        #large-canvas {
            display: none; /* 隐藏大画布 */
        }
    </style>
</head>
<body>

<div id="container"></div>
<canvas id="large-canvas" width="600" height="4000"></canvas> <!-- 这是隐藏的大画布 -->

<script>
document.addEventListener('DOMContentLoaded', function() {
    var largeCanvas = document.getElementById('large-canvas');
    var largeCtx = largeCanvas.getContext('2d');
    var container = document.getElementById('container');
    var numCanvases = 5;
    var numNumbers = 60;
    var segmentHeight = largeCanvas.height / numNumbers;

    // 在隐藏的大画布上绘制
    for (var i = 1; i <= numNumbers; i++) {
        var fontSize = Math.random() > 0.5 ? 30 : 60;
        largeCtx.font = fontSize + 'px Arial';
        var yPos = segmentHeight * i - segmentHeight / 2;
        largeCtx.fillText(i, 50, yPos);
    }

    // 创建小画布并复制大画布的内容
    for (var j = 0; j < numCanvases; j++) {
        var div = document.createElement('div');
        div.classList.add('canvas-container');
        container.appendChild(div);

        var canvas = document.createElement('canvas');
        canvas.width = 600;
        canvas.height = 800;
        div.appendChild(canvas);

        var ctx = canvas.getContext('2d');
        var sourceY = (j * largeCanvas.height) / numCanvases;
        ctx.drawImage(largeCanvas, 0, sourceY, 600, 800, 0, 0, 600, 800);
    }
});
</script>

</body>
</html>
